/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, ScrollView, Text, View,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import TagGroup from "../widget/common/TagGroup";
import * as updateInfoAction from "../actions/updateInfoAction"; // 导入action方法
import Button from "../widget/common/NCButton";
import BasePage from "../widget/common/BasePage";

class UpdateInfo extends Component {
  componentWillMount() {
    const { props } = this;
    props.dispatch(updateInfoAction.getUpdateDeviceList());
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(updateInfoAction.updateInfoUnmount());
  }

  handleModelChange(facilityId) {
    const { props } = this;
    props.dispatch(updateInfoAction.getUpdateStandard(facilityId));
  }

  handleUpdateStandardChange(item) {
    const { props } = this;
    props.dispatch(updateInfoAction.updateStandardChange(item));
  }

  handleNext() {
    const { updateInfoReducer } = this.props;
    const { curUpdateStandard } = updateInfoReducer;
    NavigatorUtil.goUpdatePlaceOrder(curUpdateStandard);
  }

  render() {
    const { updateInfoReducer } = this.props;
    const {
      updateModels, updateStandard, initing, loading, curUpdateStandard,
    } = updateInfoReducer;
    return (
      <BasePage style={styles.container} showIniting={initing} showLoading={loading}>
        <ScrollView style={styles.container}>
          <TagGroup
            title="请选择设备型号"
            data={updateModels}
            keyName="facility_name"
            valueName="facility_id"
            onChange={facilityId => this.handleModelChange(facilityId)}
          />
          <TagGroup
            title="选择服务内容"
            data={updateStandard}
            keyName="lable_name"
            valueName="item"
            onChange={item => this.handleUpdateStandardChange(item)}
          />
        </ScrollView>
        <View style={styles.bottomConatiner}>
          <Text style={styles.textPriceName}>
            金额：<Text style={styles.textPrice}>{curUpdateStandard ? curUpdateStandard.lable_price : "0.00"}</Text>{" "}
          </Text>
          <Button
            disabled={!curUpdateStandard}
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title="下一步"
            onPress={() => this.handleNext()}
          />
        </View>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  bottomConatiner: {
    width: ScreenWidth,
    height: scale * 48,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  buttonText: {
    fontSize: FontSize.SIZE_18,
    color: Color.text_title,
  },
  button: {
    width: scale * 125,
    height: scale * 48,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.bg_selected,
    borderWidth: 0,
    borderRadius: 0,
    margin: 0,
  },
  textPriceName: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_assist,
    marginLeft: scale * 32,
  },
  textPrice: {
    fontSize: FontSize.SIZE_16,
    color: Color.text_price,
    fontWeight: "bold",
  },
});

const reducers = state => {
  return {
    updateInfoReducer: state.updateInfoReducer,
  };
};

export default connect(reducers)(UpdateInfo);
